<template>
  <div id="article">
    <div class="article-wrap">
      <!-- 日记管理标题 -->
      <p class="article-list-title">个人日记</p>
      <div class="article-list-wrap">
        <!-- 发布日记 -->
        <div class="articleAdd-wrap">
          <el-button type="primary" @click="$router.push('/presonalAdd')">发布日记</el-button>
        </div>
        <!-- 日记展示 -->
        <el-table ref="singleTable" :data="presonal" highlight-current-row style="width: 100%">
          <el-table-column type="index" width="150"></el-table-column>
          <el-table-column property="title" label="标题" width="200"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.description_image_path" class="articleImag" />
            </template>
          </el-table-column>
          <!-- 日记操作 -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="$router.push('/editPersonal?id='+scope.row.id)" type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handlePresonalDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="article-paging-wrap">
          <!-- 左侧分页数量显示 -->
          <!-- <div class="article-paging-left">
            <span>共 {{page.p}} 条</span> /
            <span>共 {{page.total}} 页</span> /
            <span>第 {{p}} 页</span>
          </div>-->
          <!-- 右侧分页点击事件显示 -->
          <!-- <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :page-count="page.total"
          ></el-pagination>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { POST } from "../../Network/Request";
export default {
  data() {
    return {
      // 页数
      p: 1,
      // 文章列表显示
      presonal: []
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.onSubmit(val);
    },
    // 删除日记
    handlePresonalDelete(id) {
      POST("api/personal/delete", { id }).then(res => {
        // 判断是否删除成功
        if (res.data.code === 1) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          // 删除成功后重新发送请求
          this.handlePresonalList();
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    handlePresonalList() {
      let { id } = JSON.parse(sessionStorage.getItem("user"));
      // 请求文章
      this.$http({
        url: "api/personal",
        params: {
          id
        }
      }).then(res => {
        this.presonal = res.data;
      });
    }
  },
  // 页面加载完毕发送获取文章
  mounted() {
    this.handlePresonalList();
  }
};
</script>
<style scoped lang='less'>
#article {
  // 文章管理盒子
  .article-wrap {
    // 文章列表标题
    .article-list-title {
      margin: 0;
      padding: 0;
      height: 40px;
      padding-left: 30px;
      color: #fff;
      background: #0078ff;
      line-height: 40px;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
    }
    // 文章列表盒子
    .article-list-wrap {
      padding: 0 30px;
      .articleAdd-wrap {
        padding: 15px 0;
        float: right;
      }
      .articleImag {
        width: 20%;
      }
      .article-paging-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 60px;
      }
    }
  }
}
</style>